<template>
	<kui-page :custom-header="false">
		<template v-slot:body>
			<view class="kui-mt-0">
				<kui-config-provider font-size="16px" color="#666">
					<view>
						<view>
							<kui-text>基本用法</kui-text>
						</view>
						<view class="kui-mt-3">
							<kui-cell :show-right-icon="false">
								<template v-slot:content>
									<kui-space :gap="[0, 20]">
										<kui-icons type="heart"></kui-icons>
										<kui-icons type="heart-o"></kui-icons>
									</kui-space>
								</template>
							</kui-cell>
						</view>
					</view>
					<view class="kui-mt-3">
						<view>
							<kui-text>图标颜色</kui-text>
						</view>
						<view class="kui-mt-3">
							<kui-cell :show-right-icon="false">
								<template v-slot:content>
									<kui-space :gap="[0, 20]">
										<kui-icons type="heart" color="red"></kui-icons>
										<kui-icons type="heart-o" color="blue"></kui-icons>
									</kui-space>
								</template>
							</kui-cell>
						</view>
					</view>
					<view class="kui-mt-3">
						<view>
							<kui-text>图标大小</kui-text>
						</view>
						<view class="kui-mt-3">
							<kui-cell :show-right-icon="false">
								<template v-slot:content>
									<kui-space :gap="[0, 20]">
										<kui-icons type="heart" :size="20"></kui-icons>
										<kui-icons type="heart" :size="30"></kui-icons>
										<kui-icons type="heart" :size="40"></kui-icons>
									</kui-space>
								</template>
							</kui-cell>
						</view>
					</view>
					<view class="kui-mt-3">
						<view>
							<kui-text>图标粗细</kui-text>
						</view>
						<view class="kui-mt-3">
							<kui-cell :show-right-icon="false">
								<template v-slot:content>
									<kui-space :gap="[0, 20]">
										<kui-icons type="heart-o" :size="30" :weight="100"></kui-icons>
										<kui-icons type="heart-o" :size="30" :weight="600"></kui-icons>
									</kui-space>
								</template>
							</kui-cell>
						</view>
					</view>
					<view class="kui-mt-3">
						<view>
							<kui-text>方向展示类</kui-text>
						</view>
						<view class="kui-mt-3">
							<view class="kui-w-full kui-bg-white kui-rounded kui-py-2">
								<kui-space :gap="[20, 0]">
									<template v-for="item in directionType" :key="item">
										<view
											class="kui-flex kui-flex-col kui-justify-center kui-items-center kui-w-1-3">
											<view>
												<kui-icons :type="item" color="rgba(0,0,0,0.6)" :size="50"
													:weight="600"></kui-icons>
											</view>
											<view class="kui-text-center kui-flex kui-justify-center kui-items-center kui-flex-wrap">
												<kui-text size="24rpx">{{ item }}</kui-text>
											</view>
										</view>
									</template>
								</kui-space>
							</view>
						</view>
					</view>
					<view class="kui-mt-3">
						<view>
							<kui-text>提示建议类</kui-text>
						</view>
						<view class="kui-mt-3">
							<view class="kui-w-full kui-bg-white kui-rounded kui-py-2">
								<kui-space :gap="[20, 0]">
									<template v-for="item in tipsType" :key="item">
										<view
											class="kui-flex kui-flex-col kui-justify-center kui-items-center kui-w-1-3">
											<view>
												<kui-icons :type="item" color="rgba(0,0,0,0.6)" :size="50"
													:weight="600"></kui-icons>
											</view>
											<view class="kui-text-center">
												<kui-text size="24rpx">{{ item }}</kui-text>
											</view>
										</view>
									</template>
								</kui-space>
							</view>
						</view>
					</view>
					<view class="kui-mt-3">
						<view>
							<kui-text>交互按钮类</kui-text>
						</view>
						<view class="kui-mt-3">
							<view class="kui-w-full kui-bg-white kui-rounded kui-py-2">
								<kui-space :gap="[20, 0]">
									<template v-for="item in mutualType" :key="item">
										<view class="kui-flex kui-flex-col kui-justify-center kui-items-center kui-w-1-3">
											<view>
												<kui-icons :type="item" color="rgba(0,0,0,0.6)" :size="50"
													:weight="600"></kui-icons>
											</view>
											<view class="kui-text-center">
												<kui-text size="24rpx">{{ item }}</kui-text>
											</view>
										</view>
									</template>
								</kui-space>
							</view>
						</view>
					</view>
					<view class="kui-mt-3">
						<view>
							<kui-text>编辑类</kui-text>
						</view>
						<view class="kui-mt-3">
							<view class="kui-w-full kui-bg-white kui-rounded kui-py-2">
								<kui-space :gap="[20, 0]">
									<template v-for="item in editType" :key="item">
										<view class="kui-flex kui-flex-col kui-justify-center kui-items-center kui-w-1-3">
											<view>
												<kui-icons :type="item" color="rgba(0,0,0,0.6)" :size="50"
													:weight="600"></kui-icons>
											</view>
											<view class="kui-text-center">
												<kui-text size="24rpx">{{ item }}</kui-text>
											</view>
										</view>
									</template>
								</kui-space>
							</view>
						</view>
					</view>
					<view class="kui-mt-3">
						<view>
							<kui-text>影音类</kui-text>
						</view>
						<view class="kui-mt-3">
							<view class="kui-w-full kui-bg-white kui-rounded kui-py-2">
								<kui-space :gap="[20, 0]">
									<template v-for="item in mediaType" :key="item">
										<view class="kui-flex kui-flex-col kui-justify-center kui-items-center kui-w-1-3">
											<view>
												<kui-icons :type="item" color="rgba(0,0,0,0.6)" :size="50"
													:weight="600"></kui-icons>
											</view>
											<view class="kui-text-center">
												<kui-text size="24rpx">{{ item }}</kui-text>
											</view>
										</view>
									</template>
								</kui-space>
							</view>
						</view>
					</view>
					<view class="kui-mt-3">
						<view>
							<kui-text>品牌类</kui-text>
						</view>
						<view class="kui-mt-3">
							<view class="kui-w-full kui-bg-white kui-rounded kui-py-2">
								<kui-space :gap="[20, 0]">
									<template v-for="item in brandsType" :key="item">
										<view class="kui-flex kui-flex-col kui-justify-center kui-items-center kui-w-1-3">
											<view>
												<kui-icons :type="item" color="rgba(0,0,0,0.6)" :size="50"
													:weight="600"></kui-icons>
											</view>
											<view class="kui-text-center">
												<kui-text size="24rpx">{{ item }}</kui-text>
											</view>
										</view>
									</template>
								</kui-space>
							</view>
						</view>
					</view>
					<view class="kui-mt-3">
						<view>
							<kui-text>通用类</kui-text>
						</view>
						<view class="kui-mt-3">
							<view class="kui-w-full kui-bg-white kui-rounded kui-py-2">
								<kui-space :gap="[20, 0]">
									<template v-for="item in normalType" :key="item">
										<view class="kui-flex kui-flex-col kui-justify-center kui-items-center kui-w-1-3">
											<view>
												<kui-icons :type="item" color="rgba(0,0,0,0.6)" :size="50"
													:weight="600"></kui-icons>
											</view>
											<view class="kui-text-center">
												<kui-text size="24rpx">{{ item }}</kui-text>
											</view>
										</view>
									</template>
								</kui-space>
							</view>
						</view>
					</view>
					<view class="kui-mt-3">
						<view>
							<kui-text>动态图标</kui-text>
						</view>
						<view class="kui-mt-3">
							<kui-cell :show-right-icon="false">
								<template v-slot:content>
									<kui-space :gap="[0, 20]">
										<!-- 动效组件方式 -->
										<kui-animation name="rotate-center" :duration="1" runing infinite>
											<kui-icons type="spinner3"></kui-icons>
										</kui-animation>
										<kui-animation name="rotate-center" :duration="1" runing infinite>
											<kui-icons type="spinner8"></kui-icons>
										</kui-animation>
										<kui-animation name="rotate-center" :duration="1" runing infinite>
											<kui-icons type="spinner9"></kui-icons>
										</kui-animation>
										<kui-animation name="rotate-center" :duration="1" runing infinite>
											<kui-icons type="spinner11"></kui-icons>
										</kui-animation>
										<kui-animation name="rotate-center" :duration="1" runing infinite>
											<kui-icons type="spinner6"></kui-icons>
										</kui-animation>
										<!-- 组件库内置动画方式，注：支付宝小程序需要套一个view才能正常使用，所以建议使用内置动画方式时都把动画class加到外层view上面 -->
										<view class="kui-animate-bounce">
											<kui-icons type="download"></kui-icons>
										</view>
										<view class="kui-animate-ping">
											<kui-icons type="star"></kui-icons>
										</view>
										<view class="kui-animate-pulse">
											<kui-icons type="heart"></kui-icons>
										</view>
									</kui-space>
								</template>
							</kui-cell>
						</view>
					</view>
				</kui-config-provider>
			</view>
		</template>
	</kui-page>
</template>

<script lang="ts">
	import {
		reactive
	} from 'vue';

	export default {
		setup(props) {
			const directionType: Array < string > = [
				'arrow-left2','circle-right','circle-down','circle-left','arrow_right','keyboard_arrow_right','keyboard_arrow_left','arrow_drop_up','keyboard_arrow_up','arrow_drop_down','keyboard_arrow_down',
				'chevron-with-circle-up','cheveron-outline-up','cheveron-outline-down','cheveron-down','angle-double-right','chevron-circle-right','chevron-circle-left','angle-double-left','chevron-circle-up'
			];

			const tipsType: Array < string > = [
				'clock1','clock2','notification2','help_center','contact_support','help_outline','live_help','help','mark_chat_unread','watch_later','access_time','check_circle_outline','spellcheck','check_circle',
				'check_box_outline_blank','check_box','playlist_add_check','check1','info_outline','info1','clear','cancel','highlight_remove','add_circle_outline','control_point','add_circle','add_box','add1',
				'check-circle','check-square','minus-square','plus-square','info-with-circle','info','squared-minus','minus','minus-solid','minus-outline','exclamation-solid','warning-filled','warning','time',
				'warning-outline','warning-solid','question-circle-o','question-circle','question','check-square-o','check-circle1','check-square1','check'
			];

			const mutualType: Array < string > = [
				'download','switch','undo2','redo2','forward','reply','radio-checked','radio-checked2','radio-unchecked','thumb_up_off_alt','thumb_down_off_alt','thumbs_up_down1','thumb_up',
				'thumb_down','thumb_up_alt','thumb_down_alt','share','radio_button_on','radio_button_unchecked','mode_comment','chat_bubble_outline','chat_bubble','comment1','chat2','visibility_off','remove_red_eye',
				'settings','format_list_bulleted','menu','file_download','logout','send','thumbs_up_down','eye-off','eye','download-cloud','download1','more-vertical','more-horizontal','arrow-long-down','arrow-thin-down',
				'cloud-download','chat1','paperplane','heart1','hipchat','thumbs-o-down','thumbs-o-up','thumbs-down','thumbs-up','handshake-o','hand-pointer-o','hand-paper-o','hand-o-down','hand-o-up','hand-o-left',
				'hand-o-right','share-alt-square','share-square','share-square-o','dot-circle-o','circle-o','commenting-o','commenting','comments-o','comment-o','comments1','comment2','sign-in','mail-reply-all',
				'mail-reply','mail-forward','paper-plane-o','paper-plane','star-half-empty','star-o','star','heart-o','heart','cog'
			];
			
			const editType: Array<string> = [
				'copy','quotes-left','quotes-right','format_list_bulleted','format_color_fill','content_copy','align_vertical_top','align_vertical_center','align_vertical_bottom','align_horizontal_right',
				'align_horizontal_left','align_horizontal_center','vertical_align_top','vertical_align_center','vertical_align_bottom','format_align_right','format_align_left','format_align_justify','format_align_center',
				'folder-plus','folder-minus','folder1','link','external-link','edit1','folder-open-o','folder-open','folder2','trash-o','trash','format_underlined','content_cut','crop','border_vertical','border_top',
				'border_style','border_right','border_outer','border_left','border_inner','border_horizontal','border_color','border_clear','border_bottom','border_all','line_weight','format_italic','highlight_alt',
				'font_download','find_replace','sort','filter_list','font','sort-asc','sort-desc','sort-amount-desc','sort-amount-asc','sort-numeric-desc','sort-numeric-asc','sort-alpha-desc','unsorted','sort-alpha-asc',
				'filter1','eraser','paint-brush','search-minus','search-plus','bold'
			];
			
			const mediaType: Array<string> = [
				'bolt','headphones1','headphones3','headphones','music','mic1','previous','next','previous2','next2','volume-high','volume-medium','volume-low','volume-mute','volume-mute2','volume-increase','volume-decrease',
				'loop2','media-eject-outline','media-play-outline','media-record-outline','media-stop-outline','media-play','media-record','media-stop','media-stop','media-pause','fullscreen_exit','fullscreen',
				'play_circle_outline','play_circle_filled','pause_circle_outline','pause_circle_filled','pause','mic','music2','music1','microphone-slash'
			];
			
			const brandsType: Array<string> = [
				'github','codepen','applemusic1','toggl','tiktok','ionic','hipchat','gitlab','facebook','codesandbox','buffer','baidu','slideshare','tencent-weibo','weibo','qq','wechat','gitlab1','github-alt'
			];
			
			const normalType: Array<string> = [
				'adjust','read-more','switch','image1','cart','mobile','mobile2','user3','users1','user-plus','user-minus','user-check','spinner3','spinner6','spinner8','spinner9','spinner11','equalizer','fire','man1',
				'woman1','man-woman','folder-delete','folder-add','folder','location-outline','location','home-outline','home','user-add-outline','user-delete-outline','user-outline','user-delete','user-add','user2',
				'auto_awesome_motion','reorder','g_translate','translate','share','lock_outline','lock_open','no_encryption','lock1','support_agent','add_location_alt','headset_mic','verified_user','gps_not_fixed',
				'gps_fixed','shopping_bag','storefront','credit_card','account_balance_wallet','palette','camera','logout','folder-minus','folder-plus','folder1','smartphone','external-link','arrow-long-down','user',
				'wallet','notifications-outline','notifications','medal-solid','medal-outline','medal1-solid','medal1-outline','resize','cut','medal1','medal3','male','female','t-shirt','search','share-alt-square',
				'share-square','share-square-o','flag-o','flag','unlock','lock','calendar-check-o','calendar-times-o','calendar-minus-o','calendar-plus-o','calendar-o','map-marker','sign-in','user-o','user-circle-o',
				'user-circle','user1','shopping-cart','cart-plus','image','users'
			];

			return {
				directionType,
				tipsType,
				mutualType,
				editType,
				mediaType,
				brandsType,
				normalType
			}
		}
	}
</script>

<style>

</style>
